<template>
  <div class="vip-tip" :class="{vip}" :style="{
  width,
  lineHeight: height,
  color,
  fontSize,
  borderRadius,
  background,
  }">{{vip ? 'VIP' : '试看'}}
  </div>
</template>

<script>
  export default {
    name: "VipTip",
    props: {
      isVip: {
        type: Boolean,
        default: true
      },
      width: {
        type: String,
        default: '',
      },
      height: {
        type: String,
        default: '',
      },
      color: {
        type: String,
        default: '',
      },
      fontSize: {
        type: String,
        default: '',
      },
      borderRadius: {
        type: String,
        default: '',
      },
      background: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        vip: true
      }
    },
    watch: {
      isVip(val) {
        this.vip = val;
      }
    },
    mounted() {
      this.vip = this.isVip;
    },
  }
</script>

<style scoped lang="less">
  .vip-tip {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    width: 1.88rem;
    line-height: 1rem;
    font-size: .63rem;
    border-radius: 0 .38rem 0 .38rem;
    color: #fff;
    background-image: linear-gradient(0, #51b9fe, #0b91fc),
    linear-gradient(#ff5377, #ff5377);
    &.vip {
      background-image: linear-gradient(0, #ff774d, #ff4f19)
    }
  }
</style>
